<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>
<script type="text/javascript" src="/api-ui/static/js/vue/vue-3.2.4.global.js"></script>
<script type="text/javascript" src="/api-ui/static/js/vue/axios-0.18.0.min.js"></script>
<script type="text/javascript" src="/api-ui/static/js/vue/axios-helper.js"></script>
<style type="text/css">
	a {
		color: black;
	}

	a:hover {
		text-decoration: none;
	}

	.bgc-w {
		background-color: #fff;
	}

	.text {
		min-height: 114px;
	}
</style>
<div class="row" style="padding-top: 10px;">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">账号管理</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
			disabled="disabled">账号管理</a>
	</div>
</div>
<div class="row" style="padding-top: 15px;" id="app">
	<div class="col-md-12">
		<!--id="container"-->
		<div class="bgc-w box">
			<!--盒子头-->
			<div class="box-header">
				<h3 class="box-title">
					<a href="javascript:history.back();" class="label label-default"
					   style="padding: 5px;"> <i
							class="glyphicon glyphicon-chevron-left"></i> <span>返回</span>
					</a>
				</h3>
			</div>
			<!--盒子身体-->
			<form id="myform" onsubmit="return check();">
				<div class="box-body no-padding">
					<div class="box-body">
						<!--錯誤信息提示  -->
						<div class="alert alert-danger alert-dismissable" role="alert" style="display: none;">
							错误信息:
							<button class="thisclose close" type="button">&times;</button>
							<span class="error-mess"></span>
						</div>
						<div class="row">
							<div class="col-md-6 form-group">
								<label class="control-label"> <span>类型</span></label>
								<select class="form-control" name="mailType">
									<option value="1">系统邮件</option>
									<option value="2">公司邮件</option>
									<option value="40">私人邮件</option>
								</select>
							</div>
							<div class="col-md-6 form-group">
								<label class="control-label">状态</label>
								<select class="form-control" name="status">
									<option value="1">有效</option>
									<option value="2">无效</option>
								</select>
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">名称</label>
								<input name="accountName" type="text" id="account_Name" class="form-control"
									   readonly="readonly" value="罗密欧" style="background-color:#fff;"/>
							</div>
							<div class="col-md-6 form-group">
								<label class="control-label">发件昵称</label>
								<input name="mailUserName" type="text" id="account_Name2" class="form-control"
									   value=""/>
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">邮件账号</label>
								<input class="form-control mail" name="mailAccount" value=""/>
							</div>
							<div class="col-md-6 form-group" style="position: relative;">
								<label class="control-label">授权码</label>
								<input class="form-control" name="password" value=""/>
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">备注</label>
								<textarea class="form-control text" name="mailDes"></textarea>
								<input class="id" name="mailNumberId" value="" style="display:none;"/>
							</div>
						</div>
					</div>
				</div>
				<!--盒子尾-->
				<div class="box-footer">
					<input class="btn btn-primary" id="save" type="button" :onclick="()=>commits()" value="保存"/>
					<input class="btn btn-default" id="cancel" type="button" value="取消"
						   onclick="window.history.back();"/>
				</div>
			</form>
		</div>
	</div>
</div>
<script>
	Vue.createApp({
		methods: {
			commits() {
				console.log("开始进入了");
				//提示框可能在提交之前是block状态，所以在这之前要设置成none
				//验证邮箱
				let bool=true;
				var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
				$('.alert-danger').css('display', 'none');
				var isRight = 1;
				$('.form-control').each(function (index) {
					// 如果在这些input框中，判断是否能够为空
					if ($(this).val() == "") {
						// 获取到input框的兄弟的文本信息，并对应提醒；
						var brother = $(this).siblings('.control-label').text();
						var errorMess = "[" + brother + "输入框信息不能为空]";
						// 对齐设置错误信息提醒；红色边框
						$(this).parent().addClass("has-error has-feedback");
						$('.alert-danger').css('display', 'block');
						// 提示框的错误信息显示
						$('.error-mess').text(errorMess);
						// 模态框的错误信息显示
						$('.modal-error-mess').text(errorMess);
						isRight = 0;
						bool = false;
					}
					else {
						var $mail = $(this).val();
						if (!pattern.test($(".mail").val())&&bool) {
							// 对齐设置错误信息提醒；红色边框
							$(".mail").parent().addClass("has-error has-feedback");
							// 提示框的错误信息显示
							$('.alert-danger').css('display', 'block');
							$('.error-mess').text("邮箱格式不正确!");
							isRight = 0;
							bool = false;
						}
					}
				});
				if (isRight == 0) {
					bool = false;
				} else if (isRight == 1) {
					bool = true;
				}
				let ser = $("#myform").serialize();
				console.info(ser);
				if(bool){
					requestPost("/api-core/aoaMailnumber/saveaccount", ser).then(
							(resp)=>{
								setTimeout(()=>{
									if(resp!=null&&resp!=""){
										alert("添加成功,正在跳转页面...");
									}},1000
								);
								location.href="mailmanage.html";
							}
					)
				}
			}
		}
	}).mount("#app");
</script>
<!--校验模态框 -->

<style type="text/css">
	#thismodal .modal-dialog {
		width: 500px;
		top: 20%;
	}

	#thismodal .modal-body .icon {
		height: 80px;
		width: 80px;
		margin: 20px auto;
		border-radius: 50%;
		color: #aad6aa;
		border: 3px solid #d9ead9;
		text-align: center;
		font-size: 44px;
	}

	#thismodal .modal-body .icon .glyphicon {
		font-size: 46px;
		top: 14px;
	}

	#thismodal .modal-p {
		margin: 20px auto;
	}

	#thismodal .modal-body .modal-p h2 {
		text-align: center;
	}

	#thismodal .modal-body .modal-p p {
		text-align: center;
		color: #666;
		font-size: 16px;
		padding-top: 8px;
		font-weight: 300;
	}

	#thismodal .modal-p .btn {
		margin-left: 40%;
		width: 100px;
		height: 40px;
	}

	#thismodal .modal-error .icon {
		color: #f27474;
		border: 3px solid #f27474;
	}
</style>

<div class="modal fade in" id="thismodal" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body modal-success" style="display: none;">
				<div class="icon">
					<span class="glyphicon glyphicon-ok"></span>
				</div>
				<div class="modal-p">
					<h2>操作成功</h2>
					<!--<p style="">已回复</p>-->
					<div class="modal-p">
						<button type="button" class="btn btn-primary successToUrl" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
			<div class="modal-body modal-error" style="display: none;">
				<div class="icon">
					<span class="glyphicon glyphicon-remove"></span>
				</div>
				<div class="modal-p">
					<h2 style="text-align: center;">错误信息</h2>
					<p class="modal-error-mess">此处将显示弹出框的错误提示信息</p>
					<div class="modal-p">
						<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>

		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<script type="text/javascript" src="/api-ui/static/js/modalTip.js"></script>


<!-- 这里是执行返回失败的参数，并显示详细的信息； -->

<script type="text/javascript">


	//表单提交前执行的onsubmit()方法；返回false时，执行相应的提示信息；返回true就提交表单到后台校验与执行
</script>